<template>
  <div class="">
    <div class="col-title">{{ valueShow }}</div>
    <!-- 存在预警值 -->
    <div v-if="diffVal" class="col-text" :class="diffVal.color"> {{ diffVal.text }}</div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import dayjs from 'dayjs'

  const props = defineProps({
    value: {
      type: [String, Number],
      default: '',
    },
    record: {
      type: Object,
      required: true,
    },
    type: {
      type: String,
      default: '',
    },
  })
  // 是否是有效值
  const isValid = (num: string | number) => {
    return num || (typeof num === 'number' && num === 0)
  }
  const valueShow = computed(() => {
    const value = props.value
    if (isValid(value)) {
      if (props.type == 'mileage') {
        return value + ' 公里'
      } else {
        return value
      }
    } else {
      if (props.type == 'mileage') {
        return '- 公里'
      } else {
        return '-'
      }
    }
  })
  const diffVal = computed(() => {
    let temp = null
    const record = props.record
    if (props.type == 'mileage') {
      // 剩余公里数，下次保养里程
      if (isValid(record.estimatedKilometre)) {
        const totalMileage = record.totalMileage || 0
        const mileageDiff = record.estimatedKilometre - record.totalMileage
        if (mileageDiff >= 0) {
          temp = {
            text: `剩余 ${mileageDiff} 公里`, // 剩余公里数
            color: 'green', // 绿色
          }
        } else {
          temp = {
            text: `已超 ${Math.abs(mileageDiff)} 公里`, // 已超公里数
            color: 'red', // 红色
          }
        }
      }
    } else {
      // 传入的日期
      const value = props.value
      if (isValid(value)) {
        // 当前日期
        const today = dayjs().startOf('day')
        // 结束日期
        const endDate = dayjs(value).startOf('day')
        // 差值
        const diffDays = endDate.diff(today, 'day')
        if (diffDays >= 0) {
          temp = {
            text: `剩余 ${diffDays} 天`, // 剩余天数
            color: 'green', // 绿色
          }
        } else {
          temp = {
            text: `已超 ${Math.abs(diffDays)} 天`, // 已超天数
            color: 'red', // 红色
          }
        }
      }
    }

    return temp
  })
</script>

<style lang="less" scoped>
  .green {
    color: #00b42a;
  }
  .red {
    color: #f76965;
  }
</style>
